<template>
	<view>
		<cu-custom bgColor="bg-maincolor" :isBack="true">
			<block slot="content">
				学校详情
			</block>
		</cu-custom>
		<view class="top" @click="skip_id(school_id)">
			<view class="top_car" >
				<image :src="logo" class="cu-avatar round lg avat" v-if="logo"></image>
				<view v-if="!logo" class="nologo_img" style="background-color: #007AFF;">{{school_name[0]}}</view>
				<view class="text" >
					<view class="school_name" >{{school_name}}</view>
					<view class="school_detail">这里是学校描述副标题</view>
				</view>
				<view class="cuIcon-settings setting"></view>
			</view>
		</view>
		<view class="tital" >
			<view class="school_text" @click="check(index)" v-for="(item,index) in list" :key='index'>
				<view class="sch" :class="index==active? 'sch':'sch1'">{{item}}</view>
				<view class="hengx" v-if="index==active"></view>
			</view>
			<!-- <view class="school_text" @click="two_check()">
				<view class="sch" :class="active!==1? 'sch':'sch1'">学校环境</view>
				<view class="hengx" v-if="active!==1"></view>
			</view> -->
		</view>
		<view v-if="active==0">
			<view class="form1">
				<view class="row" >
						<view class="sch_name">学校名称</view>
						<view class="right_name">{{school_name}}</view>		
					
				</view>
			</view>
			
			<view class="form1">
				<view class="row" >
						<view class="sch_name">学校地址</view>
						<view class="right_name">{{address}}</view>
					
				</view>
			</view>
			
			<view class="form1">
				<view class="row" >
					<view class="sch_name">联系电话</view>
					<view class="right_name">{{phone}}</view>
					
				</view>
			</view>
			
			<view class="form1">
				<view class="row" >
						<view class="sch_name">校长</view>
						<view class="right_name">{{principal}}</view>	
				</view>
			</view>
			<view style="background-color: #FFFFFF;">
					<view class="sch_name" style="padding-top: 25rpx;">学院设置</view>
					<view class="sm_text ">
						<view class='bgcolor' v-for="(item,index) in branch_sys" :key='index'>{{item}}</view>
					</view>
				<view style="height: 500rpx;background-color: #FFFFFF;"></view>
			</view>
			</view>
			
		<view v-if="active==1" style="height: 1200rpx;background-color: #FFFFFF;">
			<view class="img_list">
				<image :src="item" class="imag" v-for="(item,index) in img" :key='index' mode="aspectFill" @tap="previewImage(item)"></image>
			</view>
		</view>
	</view>
</template>

<script>
	const {
		appLogin,
		httpGet,
		httpPost
	} = require("@/utils/common.js")
	export default {
		data() {
			return {
				    school_id:'',
					active:0,
					school_name:'',
					address:'',
					phone:'',
				    principal:'',	
					list:['学校介绍','学校环境'],
					img:[],
					logo:'',
					branch_sys:[]
			}
		},
		onLoad(option) {			
			appLogin((user_info) => {
				console.log(user_info)
				this.school_id = option.school_id
				this.getinfo()
			})
		},
		methods: {
			// 查看图片
			previewImage(current){
				console.log(current)
				uni.previewImage({
					current,
					urls: this.img
				})
			},
			check(index){
				this.active = index
			},
			getinfo(){
				httpGet({
					url:'/api/school/info',
					data:{
						school_id:this.school_id
					}
				}).then((res) => {
					console.log(res)
					this.school_name = res.result.school_name
					this.address = res.result.address
					this.phone = res.result.phone
					this.principal = res.result.principal
					this.logo = res.result.logo
					this.branch_sys = res.result.branch_sys
					this.img = res.result.images
				})
			},
			skip_id(school_id){
				uni.navigateTo({
					url:'school_save?school_id='+ school_id
				})
				console.log(school_id)
			},
		}
	}
</script>

<style>
	.top{
		height: 250rpx;
		width: 100%;
		background-color: rgb(59,115,246);
	}
	.top_car{
		display: flex;
		padding-top: 35rpx;
		margin-left: 30rpx;
	}
	.school_name{
		font-size: 30rpx;
		color: #FFFFFF;
	}
	.school_detail{
		color: rgb(210,210,252);
		padding-top: 10rpx;
		font-size: 24rpx;
	}
	.text{
		margin-left: 37rpx;
	}
	.tital{
		width: 100%;
		height: 200rpx;
		margin-top: -30rpx;
		border-radius: 25rpx 25rpx 0rpx 0rpx;
		background-color: #FFFFFF;
		display: flex;
	}
	.school_text{
		margin-top: 70rpx;
		margin-left: 72rpx;
	}
	.hengx{
		width: 80rpx;
		height: 8rpx;
		background-color: rgb(59,115,246);
		margin: auto;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}
	.sch{
		font-size: 30rpx;
		color: rgb(59,115,246);
		font-weight: 1000rpx;
	}
	.sch1{
		font-size: 30rpx;
		color: rgb(102,102,102);
	}
	.row{
		display: flex;
		height: 95rpx;
		background-color: #FFFFFF;
		line-height: 95rpx;
		margin-bottom: 3rpx;
	}
	.sch_name{
		font-size: 30rpx;
		color: rgb(102,102,102);
		margin-left: 30rpx;
	}
	.right_name{
		position: absolute;
		right: 52rpx;
		font-size: 26rpx;
	}
	.nologo_img {
		height: 100rpx;
		width: 100rpx;
		border-radius: 50%;
		background-color: #007AFF;
		text-align: center;
		line-height: 100rpx;
		font-size: 36rpx;
		color: #FFFFFF;
	}
	
	.icou_right{
		position: absolute;
		right: 20rpx;
	}
	.sm_text{
		display: flex;
		flex-flow: row wrap;
		padding-left: 30rpx;
		/* margin-top: 30rpx; */
	}
	.right_box {
		color: #FFFFFF;
		font-size: 25rpx;
		position: absolute;
		right: 30rpx;
		margin-top: 48rpx;
	}
	.setting{
		position: absolute;
		right: 60rpx;
		margin-top: 15rpx;
		color: #FFFFFF;
		font-size: 40rpx;
	}
	.bgcolor{
		margin-top: 30rpx;
		background-color: rgb(117,157,249);
		height: 55rpx;
		line-height: 55rpx;
		text-align: center;
		font-size: 25rpx;
		color: #FFFFFF;
		border-radius: 10rpx;
		padding: 0rpx 15rpx 0rpx 15rpx ;
		margin-right: 20rpx;
	}
	/* 学校环境 */
	.img_list{
		display: flex;
		margin-left: 20rpx;
		/* margin-right: 30rpx; */
		width: 690rpx;
		flex-flow: row wrap;
		/* justify-content: space-around; */
	}
	.imag{
		width: 230rpx;
		height: 230rpx;
		padding-left: 20rpx;
		padding-bottom: 15rpx;
		
	}
</style>
